<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="年度">
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="queryParams.year"
            type="year"
            placeholder="Pick a year"
            value-format="YYYY"
          />
        </div>
      </el-form-item>

      <el-form-item label="姓名">
        <el-input v-model="queryParams.name" placeholder="姓名"></el-input>
      </el-form-item>

      <el-form-item label="机台类型">
        <el-select v-model="queryParams.jtlx" clearable placeholder="请选择">
          <el-option
            v-for="dict in ems_machine_info_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

<!--      <el-form-item label="请选择车间">-->
<!--        <el-select-->
<!--          v-model="queryParams.workshopname"-->
<!--          clearable-->
<!--          placeholder="请选择"-->
<!--        >-->
<!--          <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value"-->
<!--          >-->
<!--          </el-option>-->
<!--        </el-select>-->

<!--        &lt;!&ndash; <el-input v-model="queryParams.contract_no" placeholder="合同号"></el-input> &ndash;&gt;-->
<!--      </el-form-item>-->


      <el-form-item label="请选择车间" prop="workshopname">
        <el-select
            style="width: 200px"
            @change="handleQuery"
            v-model="queryParams.workshopname"
            clearable
            placeholder="请选择车间"
        >
          <el-option
              v-for="item in sh_workshop"
              :key="item.value"
              :value="item.value"
              :label="item.label"
          ></el-option>

        </el-select>
      </el-form-item>


      <el-form-item>
        <!-- <el-button type="primary" >查询</el-button> -->
        <!-- <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button> -->

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>

      </el-form-item>
    </el-form>


    <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="Download"
              @click="handleExport"
              >导出</el-button
            >
          </el-col>
        </el-row>

    <el-table
      :data="postList"
      v-loading="loading"
      height="450"
      border
      show-summary
      style="width: 100%"
    >
      <el-table-column prop="year" label="年度"> </el-table-column>

<!--      <el-table-column prop="workshopname" label="车间"> </el-table-column>-->
      <el-table-column
          label="所属车间"
          min-width="100"
          align="center"
          prop="workshopname"
      >
        <template v-slot="{ row }">
          {{ getshworkshop(row.workshopname) }}
        </template>
      </el-table-column>

      <el-table-column prop="name" label="姓名"> </el-table-column>

      <el-table-column prop="onemonth" sortable label="1月">
        <template v-slot="{ row }">
          <el-button
            v-if="row.onemonth > 0"
            type="primary"
            @click="handleView(row, one)"
            link
          >
            {{ row.onemonth }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="twomonth" sortable label="2月">
        <template v-slot="{ row }">
          <el-button
            v-if="row.twomonth > 0"
            type="primary"
            @click="handleView(row, two)"
            link
          >
            {{ row.twomonth }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="threemonth" sortable label="3月">
        <template v-slot="{ row }">
          <el-button
            v-if="row.threemonth > 0"
            type="primary"
            @click="handleView(row, three)"
            link
          >
            {{ row.threemonth }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column prop="fourmonth" sortable label="4月">
        <template v-slot="{ row }">
          <el-button
            v-if="row.fourmonth > 0"
            type="primary"
            @click="handleView(row, four)"
            link
          >
            {{ row.fourmonth }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column prop="fivemonth" sortable label="5月">
        <template v-slot="{ row }">
          <el-button
            v-if="row.fivemonth > 0"
            type="primary"
            @click="handleView(row, five)"
            link
          >
            {{ row.fivemonth }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column prop="sixmonth" sortable label="6月">
        <template v-slot="{ row }">
          <el-button
            v-if="row.sixmonth > 0"
            type="primary"
            @click="handleView(row, six)"
            link
          >
            {{ row.sixmonth }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="sevenmonth" sortable label="7月">
        <template v-slot="{ row }">
          <el-button
            v-if="row.sevenmonth > 0"
            type="primary"
            @click="handleView(row, seven)"
            link
          >
            {{ row.sevenmonth }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="eightmonth" sortable label="8月">
        <template v-slot="{ row }">
          <el-button
            v-if="row.eightmonth > 0"
            type="primary"
            @click="handleView(row, eight)"
            link
          >
            {{ row.eightmonth }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column prop="ninemonth" sortable label="9月">
        <template v-slot="{ row }">
          <el-button
            v-if="row.ninemonth > 0"
            type="primary"
            @click="handleView(row, nine)"
            link
          >
            {{ row.ninemonth }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column prop="tenmonth" sortable label="10月">
        <template v-slot="{ row }">
          <el-button
            v-if="row.tenmonth > 0"
            type="primary"
            @click="handleView(row, ten)"
            link
          >
            {{ row.tenmonth }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column prop="elevenmonth" sortable label="11月">
        <template v-slot="{ row }">
          <el-button
            v-if="row.elevenmonth > 0"
            type="primary"
            @click="handleView(row, eleventwelve)"
            link
          >
            {{ row.elevenmonth }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column prop="twelvemonth" sortable label="12月">
        <template v-slot="{ row }">
          <el-button
            v-if="row.twelvemonth > 0"
            type="primary"
            @click="handleView(row, thirteen)"
            link
          >
            {{ row.twelvemonth }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="Persion">
import { ref, onMounted } from "vue";
import { getPersionList,exportUseListhj } from "@/api/repord/userrepord";
import { downLoadBlob } from "@/utils/ruoyi";

const router = useRouter();
const { proxy } = getCurrentInstance();
const { ems_machine_info_type, sys_user_sex,sh_workshop } = proxy.useDict(
  "ems_machine_info_type",
  "sys_user_sex",
    "sh_workshop"
);

const options = ref([
  { value: "一车间", label: "一车间" },
  { value: "二车间", label: "二车间" },
  { value: "三车间", label: "三车间" },
  { value: "四车间", label: "四车间" },
]);
const one = ref("01");
const two = ref("02");
const three = ref("03");
const four = ref("04");
const five = ref("05");
const six = ref("06");
const seven = ref("07");
const eight = ref("08");
const nine = ref("09");
const ten = ref("10");
const eleventwelve = ref("11");
const thirteen = ref("12");

const value = ref("");
const queryParams = ref({
  pageNum: 1,
  pageSize: 200,
  workshopname: undefined,
  year: `${new Date().getFullYear()}`,
  jtlx: undefined,
  name: undefined,
});

const postList = ref([]);
const total = ref(0);
const loading = ref(true);

// 获取列表
const getList = async () => {
  try {
    loading.value = true;
    const response = await getPersionList(queryParams.value);
    postList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  } catch (error) {
    console.error(error);
    // 处理错误逻辑
  }
};

// 查看
const handleView = (row,value) => {
  router.push({
    path: "/repord/persion/details",
    query: {
      name: row.name,
      month: value,
      year: row.year,
      info: true,
    },
  });

};
  // 导出工资合计
  const handleExport = () => {
  exportUseListhj(queryParams.value).then((res) => {
    downLoadBlob(res, "工资汇总");
  });
};

// 搜索按钮操作
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};


const getshworkshop = (row) => {
  const val = sh_workshop.value.find((item) => item.value == row);
  return val ? val.label : "";
};
// 汇总函数
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "总价";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
      sums[index] += " 元";
    } else {
      sums[index] = "N/A";
    }
  });

  return sums;
};
// 在组件挂载后获取列表
onMounted(getList);

/** 重置按钮操作 */
function resetQuery() {
  // dateRange.value = [];
  // proxy.resetForm("queryRef");
  queryParams.value.name = undefined;
  queryParams.value.workshopname = undefined;
  queryParams.value.jtlx = undefined;

  // proxy.$refs.deptTreeRef.setCurrentKey(null);
  // handleQuery();
}

// // 查看
// const handleView = (row) => {
//   router.push({
//     path: "/repord/persion/details",
//     query: {
//       name: row.name,
//       month: six.value,
//       year: row.year,
//       info: true,
//     },
//   });
// };
</script>